<template>
    <div class="flex flex-row items-stretch h-full box-border" style="min-width: 928px;">
        <section class="xl:w-[300px] box-border flex-none px-6 py-5 overflow-hidden border-r border-solid border-r-[#E8EBF5] flex flex-col">
            <ul class="flex flex-col gap-[10px] box-border flex-1 overflow-auto">
                <li class="touchable-opacity info-item-nav" :class="item.key === activeKey ? 'info-item-nav-active' : ''" v-for="item of infoItemNavs" :key="item.key" @click="activeKey = item.key">
                    <span class="info-item-nav-text">{{ item.text }}</span>
                    <a-flex align="center">
                        <span class="info-item-nav-state">{{ item.label }}</span>
                        <GpFontIcon name="icon-jiantou_you" class="iconfont ml-[10px]"/>
                    </a-flex>
                </li>
            </ul>
            <div class="flex flex-row gap-2 justify-center items-center w-full mt-auto rounded-sm border border-solid border-theme h-10 touchable-opacity text-sm text-theme hover:bg-theme/4"
                @click="openCompanyWebModal()"
            >
                <GpFontIcon name="icon-erweima" />
                <span>访问微招聘官网</span>
            </div>
        </section>
        <section class="flex-1 overflow-auto">
            <component :is="currentComponent" v-bind="data" @refresh="refreshAsync"/>
        </section>
        <CompanyWebModal ref="companyWebModalRef" />
    </div>
</template>
<script lang="ts" setup>
import { getCompanyinfoIndex } from '@/api/siderBar/companyInfo'
import type { CompanyInfoResult } from '@/api/siderBar/model'
import { useAppStore } from '@/stores'
import CompanyWebModal from './components/CompanyWebModal/index.vue'
import type { Exposed as CompanyWebModalExposed } from './components/CompanyWebModal/type'

enum Render {
    CompanyBasicInfo,
    CompanyFuLi,
    CompanyIntro,
    CompanyMainCase,
    CompanyAlbum,
    CompanyVideo,
    CompanyPerson,
    CompanyCaseIntro,
    CompanyLeaderIntro
}
defineOptions({
    name: 'CompanyInfoPage'
})
definePage({
    name: 'CompanyInfoPage',
    meta: {
        text: '公司信息',
        title: '公司信息',
        isLayout: false,
        navMatchedName: "CompSettingLayout"
    }
})
const comps = new Map<Render, any>([
    [Render.CompanyBasicInfo, () => import('./components/CompanyBasicInfo.vue')],
    [Render.CompanyFuLi, () => import('./components/CompanyFuLi/index.vue')],
    [Render.CompanyIntro, () => import('./components/CompanyIntro.vue')],
    [Render.CompanyMainCase, () => import('./components/CompanyMainCase.vue')],
    [Render.CompanyAlbum, () => import('./components/CompanyAlbum.vue')],
    [Render.CompanyVideo, () => import('./components/CompanyVideo.vue')],
    [Render.CompanyPerson, () => import('./components/CompanyPerson.vue')],
    [Render.CompanyCaseIntro, () => import('./components/CompanyCaseIntro.vue')],
    // [Render.CompanyLeaderIntro, () => import('./components/CompanyLeaderIntro.vue')],
])
const activeKey = ref(Render.CompanyBasicInfo)
const currentComponent = computed(() => defineAsyncComponent({
    loader: comps.get(activeKey.value) as any
}))
const appStore = useAppStore()
const { data, refreshAsync } = useRequest(() => getCompanyinfoIndex(), {
    initialData: {} as CompanyInfoResult,
    onBefore() {
        appStore.toggleLoading(true)
    },
    onAfter() {
        appStore.toggleLoading(false)
    }
})
const infoItemNavs = computed(() => {
    const navs: Array<{text: string; key: Render; label?: string;}> = [
        {
            text: '公司基本信息',
            key: Render.CompanyBasicInfo,
        },
        {
            text: '公司福利',
            key: Render.CompanyFuLi
        },
        {
            text: '公司介绍',
            key: Render.CompanyIntro
        },
        {
            text: '主营业务',
            key: Render.CompanyMainCase
        },
        {
            text: '公司相册',
            key: Render.CompanyAlbum
        },
        {
            text: '公司视频',
            key: Render.CompanyVideo
        },
        {
            text: '人才发展',
            key: Render.CompanyPerson
        },
        {
            text: '产品介绍',
            key: Render.CompanyCaseIntro
        },
        // {
        //     text: '高管介绍',
        //     key: Render.CompanyLeaderIntro
        // }
    ]
    let count = 0, total = 0
    const { baseInfo, workTime, welfares, introduce, businesses, pictures, videos, development, products } = toValue(data)!
    // baseInfo
    ;(<const>["logo","name","fullName","industry","stage","scale"]).forEach(field => {
        total++
        if (baseInfo && baseInfo[field]) {
            count++
        }
    })
    if (baseInfo && baseInfo.areaId && baseInfo.address && baseInfo.lng && baseInfo.lat) {
        count++
    }
    total++
    if (baseInfo && baseInfo.contactName && baseInfo.contactPhone) {
        count++
    }
    total++
    navs[0].label = count + '/' + total
    count = 0, total = 0
    // workTime & welfares
    if (workTime) {
        const fulfilled = (<const>["endTime","overTime","rest","startTime"]).every(field => {
            if (workTime && workTime[field]) {
                return true
            }
            return false
        })
        fulfilled && (count++)
    }
    total++
    if (welfares && welfares.length > 0) {
        count++
    }
    total++
    navs[1].label = count + '/' + total
    count = 0, total = 0
    // introduce
    let fulfilled = (<const>["briefIntroduce", "culture", "history", "honor", "introduce"]).every(field => {
        if (introduce && introduce[field]) {
            return true
        }
        return false
    })
    if (!fulfilled) {
        navs[2].label = '未完善'
    }
    // businesses
    if (!businesses || businesses.length <= 0) {
        navs[3].label = '未完善'
    }
    // pictures
    if (!pictures || pictures.length <= 0) {
        navs[4].label = '未完善'
    }
    // videos
    if (!videos || videos.length <= 0) {
        navs[5].label = '未完善'
    }
    // development
    fulfilled = Boolean(development && development.itemNameList && development.itemNameList.length > 0/** && development.developmentDescription */)
    if (!fulfilled) {
        navs[6].label = '未完善'
    }
    // products
    if (!products || products.length <= 0) {
        navs[6].label = '未完善'
    }
    return navs
})
const companyWebModalRef = ref<CompanyWebModalExposed>()
function openCompanyWebModal() {
    if (companyWebModalRef.value && data.value) {
        companyWebModalRef.value.open(data.value.miniWebUrl)
    }
}
</script>
<style lang="less" scoped>
@reference "../../../../../assets/styles/tailwind.css";
.info-item-nav {
    padding-right: 10px;
    @apply flex flex-row items-center box-border h-10 rounded-sm text-sm pl-4 justify-between gap-8;
    .info-item-nav-text {
        @apply text-third;
    }
    .info-item-nav-state {
        color: #ACAEB2;
    }
    .iconfont {
        @apply text-third;
    }
    &:hover {
        @apply bg-[#F8F9FF];
    }
    &.info-item-nav-active {
        @apply bg-[#F8F9FF] font-medium;
        .info-item-nav-text,
        .info-item-nav-state,
        .iconfont {
            @apply text-[#324366];
        }
    }
}
</style>